<template>
    <div>
        <van-nav-bar title="购物车" left-arrow @click-left="($router.push('/search'))" />
        <div v-for="item in cartData">
            <van-swipe-cell>
                <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                    <template #thumb>
                        <div style="width: 100px; height: 100px;display: flex;">
                            <van-checkbox v-model="item.checked"></van-checkbox>
                            <img :src="item.goods.goods_small_logo ? item.goods.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt="" style="width: 75px;height: 75px;">
                        </div>
                    </template>
                    <template #num>
                        <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />

                    </template>
                </van-card>
                <template #right>
                    <van-button square @click="delcart(item.id)" text="删除" type="danger" class="delete-button"
                        style="height: 100%;" />
                </template>
            </van-swipe-cell>

        </div>
          <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked">全选</van-checkbox>
    </van-submit-bar>

    </div>
  
</template>

<script setup>
import { computed, ref } from 'vue';
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
console.log(store.cart)
let cartData = ref([])
const cart = () => {
    cartData.value = store.cart
}
cart()
const delcart = (id) => {
    store.cart = store.cart.filter(item => item = !id)
    cart()

}
let checked=computed({
    get(){
        if(cartData.value.length==0){
            return false
        }
        else{
            return cartData.value.every(item=>item.checked)
        }

    },
    set(val){
        console.log(val)
        cartData.value.forEach(item=>item.checked=val)

    }
    
})
let allprice=computed(()=>{
    let allprice=ref(0)
    let ok=cartData.value.filter(item=>item.checked)
    ok.forEach((item)=>{
       allprice.value=item.number*item.goods.goods_price
    })
    return allprice.value*100
})
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
const router=useRouter()
import { orderApi } from '@/api/api';
const onSubmit=()=>{
    let ok=cartData.value.filter(item=>item.checked)
    if(ok.length==0){
        showFailToast('请选择商品')

    }
    else{
        console.log(ok)
        orderApi({
            goodsIds:ok.map(item=>item.goods.goods_id).join(','),
            username:localStorage.getItem('username'),
            product_code:ok[0]+'商品',
            totalPrice:allprice.value,
            nums:ok.map(item=>item.number).join(','),
        }).then(res=>{
           
            router.push('/order/'+res.data.data.orderId)
        })
    }

}



</script>

<style lang="scss" scoped></style>